<template>
	<view class="identity">
		<view class="add-card">
			<view class="title">请提交身份信息</view>
			<view class="text">将用于身份核验及代办纳税相关事项，仅会提供税务局等国家机关，我们会对此信息采取严格保密！</view>
			<view class="card-item">
				<view class="item-label">真实姓名</view>
				<input type="text" class="input" maxlength="11" v-model="listData.realName" placeholder="请输入真实姓名" />
				<view class=""></view>
			</view>
			<view class="card-item">
				<view class="item-label">身份证号</view>
				<input type="text" class="input" placeholder="请输入身份证号" v-model="listData.idCardNo" />
			</view>
			<view class="card-item">
				<view class="item-label">手机号</view>
				<input type="text" class="input" maxlength="11" v-model="listData.mobile" placeholder="请输入手机号" />
			</view>
			<view class="card-item">
				<view class="item-label">验证码</view>
				<input type="text" class="input" v-model="listData.code" placeholder="请输入短信验证码" />
				<button
					:disabled="btnStatus != '发送验证码'"
					:style="{ color: btnStatus != '发送验证码' ? '#B0B0B0 !important' : 'var(--theme-color)' }"
					class="item-button"
					@click="codeList"
				>
					{{ btnStatus }}
				</button>
			</view>
		</view>
		<view class="add-footer">
			<view class="button" @click="submit">提交</view>
			<!-- <view class="button reset">重置</view> -->
		</view>
	</view>
</template>

<script>
import { fVailPhone } from '@/utils/Tools.js';
export default {
	data() {
		return {
			listData: {
				code: '',
				idCardNo: '',
				mobile: '',
				realName: ''
			},
			btnStatus: '发送验证码',
			time: 60
		};
	},

	methods: {
		submit() {
			if (!this.isValidAll()) {
				return;
			}
			this.$post('/yahe/certification', this.listData, '1').then((res) => {
				if (res.success) {
					this.$toast('实名认证成功', 'none');
					uni.navigateTo({
						url: '/mineComponentPackage/component/identity/prompt'
					});
				} else {
					this.$toast(res.message, 'none');
				}
			});
		},
		isValidAll() {
			const flageName = this.isName(this.listData.realName);
			if (!flageName) {
				return false;
			}

			const flageId = this.isValidIDCardLength(this.listData.idCardNo);
			if (!flageId) {
				return false;
			}

			const flagPhone = fVailPhone(this.listData.mobile);
			if (!flagPhone) {
				return false;
			}

			if (!this.listData.code) {
				this.$toast('请输入验证码', 'none');
				return false;
			}
			return true;
		},
		isName(name) {
			const regex = new RegExp('^[\u4E00-\u9FA5]+$');

			if (!name) {
				this.$toast('请输入真实姓名', 'none');
				return false;
			} else if (!regex.test(name)) {
				this.$toast('请输入有效真实姓名', 'none');
				return false;
			} else {
				return true;
			}
		},
		isValidIDCardLength(id) {
			if (!id) {
				this.$toast('请输入身份证号', 'none');
				return false;
			} else {
				return true;
			}
			// else if (!/^(\d{15}|\d{18})$/.test(id)) {
			// 	this.$toast('请输入有效身份证号', 'none');
			// 	return false;
			// } 
			
		},
		codeList() {
			const data = {
				recv: this.listData.mobile,
				verifyValue: 111111
			};
			const phoneRes = fVailPhone(this.listData.mobile);

			if (phoneRes && this.btnStatus == '发送验证码') {
				this.sendLoginCode(data);
			} else {
				this.$toast('手机号格式不正确', 'none');
			}
		},
		async sendLoginCode(data) {
			//  获取验证码
			clearInterval(timer);
			let timer;
			uni.showLoading({
				title: '加载中'
			});
			const res = await this.$post('/notification/codes/auth', data, '1');
			if (res.code == '1') {
				this.$toast('获取验证码成功', 'success');
				timer = setInterval(() => {
					if (this.time == 1) {
						this.btnStatus = '发送验证码';
						this.time = 60;
						clearInterval(timer);
						return;
					}
					this.btnStatus = `重新发送(${--this.time})`;
				}, 1000);
			} else {
				this.$toast(res.message, 'none');
			}
		}
	}
};
</script>

<style scoped lang="less">
.identity {
	// padding: 24rpx;
	// box-sizing: border-box;
	// background: var(--page-bg);
	display: flex;
	justify-content: center;
	padding: 20rpx;

	.add-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 0 24rpx;
		width: 100%;
		margin-top: 40rpx;
		gap: 40rpx;
		display: flex;
		flex-direction: column;
		.title {
			font-weight: bold;
			font-size: 36rpx;
			color: #3a3a3a;
		}
		.text {
			font-weight: 400;
			font-size: 26rpx;
			color: #6d6d6d;
		}
		.card-item {
			padding: 34rpx 0;
			line-height: 1;
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #6d6d6d;
			border-bottom: 2rpx solid #efefef;
			&:last-child {
				border: 0;
			}
			.item-label {
				color: var(--title-color);
				margin-right: auto;
			}
			.input {
				text-align: right;
			}

			.item-button {
				padding: 16rpx 12rpx;
				background: #fff;
				// background-color: var(--theme-color);
				color: var(--theme-color);
				font-weight: 400;
				font-size: 30rpx;
				border-radius: 8rpx;
				text-align: center;
				margin-left: 12rpx;
			}
		}
	}

	.add-footer {
		width: 630rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%);
		border-radius: 88rpx 88rpx 88rpx 88rpx;
		line-height: 80rpx;
		text-align: center;
		position: fixed;
		bottom: 40rpx;
		.button {
			font-weight: 400;
			font-size: 30rpx;
			color: #ffffff;
			&.reset {
				background: #fff;
				color: var(--title-color);
				border: 2rpx solid var(--border-color);
			}
		}
	}
}
</style>
